<!--
 * @Author: your name
 * @Date: 2022-02-22 22:38:25
 * @LastEditTime: 2024-09-13 17:00:12
 * @LastEditors: guojinxin_hub 1907745233@qq.com
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \DTSWeekly_zhyq\src\components\right_box.vue
-->
<!-- right_box -->
<template>
  <transition
    appear
    name="custom-classes-transition"
    enter-active-class="animate__animated animate__faster  animate__fadeInRight "
    leave-active-class="animate__animated animate__faster animate__fadeOutRight "
  >
    <div v-if="animate" class="right_box">
      <div class="content">
        <slot></slot>
      </div>
    </div>
  </transition>
</template>

<script lang="ts" setup>
import { useAnimateStore } from "@/stores/animate";
import { computed } from "vue";

const animatestore = useAnimateStore();
const animate = computed(() => animatestore.$state.Animate);
</script>

<style lang="scss" scoped>
.right_box {
  position: absolute;
  // width: 350px;
  width: 774px;
  // height: calc(100% - 60px);
  // @include hHeightCalc(65);
  height: 100%;

  // background: rgba(18, 123, 131, 0.911);
  // top: 30px;
 
  right: 0px;
  z-index: 9;
  background: url("../assets/images/基础/right_bg_dark@2x.png") no-repeat
    center/cover;
  box-sizing: border-box;

  .content {
    width: 100%;
    height: 100%;
    // border: 1px solid rgba(255, 255, 255, 0.527);
    padding-top: 100px;
    padding-left: 100px;
  }
}
</style>
